﻿ul, li
{
    margin: 0;
    padding: 0;
}
ul li
{
    list-style: none;
}



#arena {
    border: 1px solid black;
    margin: 50px;
    width: 600px;
}

ul.power > li
{
    display: inline-block;
    width: 110px;
}

ul.warriors > li
{
    background: url("../i/combat/cardslotfon.png") -4px transparent;
    display: inline-block;
    border: 1px dotted black;
    margin: 2px;
}
    ul.warriors > li.highlight-slot
    {
        border: 1px solid blue;
    }


/****************     Cards     **************/
#cards
{
    border: 1px solid black;
    margin: 50px;
    width: 600px;
}
    #cards > ul
    {
        display: inline-block;
        height: 100%;
    }
        #cards > ul > li
        {
            background: url("../i/combat/cardslotfon.png") -4px transparent;
            border: 1px solid black;
            margin: 2px;
        }
            #cards > ul > li.selected-card
            {
                border: 1px solid red;
            }
    #cards .off
    {
        cursor: no-drop;
        opacity: 0.5;
    }
            
.card
{
    height: 96px;
    width: 86px;
    position: relative;
}
    .card span
    {
        display:block;
        width:16px;
        position: absolute;
        text-align:center;
    }
    .card .cost
    {
        right: 2px;
        color:blue;
    }
    .card .damage
    {
        bottom: 2px;
        left: 2px;
        color:red;
    }
    .card .health
    {
        bottom:2px;
        right:2px;
        color:green;
    }